<template>
	<view>
		<!-- 下拉框 选择盲盒种类 -->
		<view class="blind-box-selector">
			<picker @change="onBlindBoxChange" :value="selectedBlindBoxIndex" :range="blindBoxNameList" class="picker">
				<view class="picker-title">
					{{ blindBoxList[selectedBlindBoxIndex].blindBoxName}}￥{{ blindBoxList[selectedBlindBoxIndex].price}}
				</view>
			</picker>
		</view>
	</view>
	<view class="egg-twist">
		<!-- 抽奖机主体 -->
		<view class="egg-twist-container" :style="{ scale: size }">
			<image src="../../static/抽奖/niu-dan-ji.png" class="egg-twist-main-img" mode="aspectFit"></image>
			<image src="../../static/抽奖/jin-yong-btn.png" class="egg-twist-btn" mode="aspectFit" v-if="disabled"
				@click="handleDisabled"></image>
			<template v-if="!start && !disabled && !getRes">
				<image src="../../static/抽奖/not-start-btn.png" class="egg-twist-btn" mode="aspectFit"
					@click="handleStart">
				</image>
				<image src="../../static/抽奖/xiao-shou.png" class="egg-twist-shou" mode="aspectFit" @click="handleStart">
				</image>
			</template>
			<image src="../../static/抽奖/starting-btn.png" class="egg-twist-btn" mode="aspectFit" v-if="start || getRes">
			</image>
			<image src="../../static/抽奖/chu-kou.png" class="egg-twist-chu-kou" mode="aspectFit"></image>
			<!-- 以下为扭蛋图 -->
			<image v-for="(giftImg, index) in defGiftImgList" :key="index" :src="giftImg"
				:class="['egg-twist-' + (index + 1), { gift: start }]" mode="aspectFit" />
			<!-- 抽取结果蛋 -->
			<image :src="resBallImg || `../../static/抽奖/qiu${resLv}.png`" class="res-egg" mode="aspectFit"
				v-if="getRes">
			</image>
		</view>

		<!-- 抽奖结果 -->
		<view class="gift-res" v-if="showGiftRes">
			<view class="res-container">
				<image :src="notWinImg" mode="aspectFit" class="not-win-img" v-if="!giftRes.giftName"></image>
				<view v-else class="res-img-box">
					<image src="../../static/抽奖/guang.png" mode="aspectFit" class="res-guang"></image>
					<image :src="giftRes.url" mode="aspectFit" class="res-img"></image>
					<view class="res-text">恭喜获得：{{ giftRes.giftName }}</view>
				</view>
				<image src="../../static/抽奖/que-ren.png" class="res-submit" mode="aspectFit" @click="handleOk"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		onMounted,
		computed
	} from 'vue';
	import {
		getBlindProduct,
		getBlindBoxList
	} from "../../api/eggMachine.js"
	// 盲盒列表
	const blindBoxList = ref(['主板盲盒', 'CPU盲盒', '笔记本盲盒', '机箱盲盒', '零食盲盒', '手机盲盒', '玩偶盲盒', '显卡盲盒', '显示器盲盒']);
	// 选中的盲盒索引
	const selectedBlindBoxIndex = ref(0);
	// 定义 props
	const props = defineProps({
		size: {
			type: Number,
			default: 1,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		resLv: {
			type: Number,
			default: 2,
		},
		resBallImg: {
			type: String,
			default: '',
		},
		giftRes: {
			type: Object,
			default: () => ({
				id: null,
				giftName: null,
				url: '',
			}),
		},
		notWinImg: {
			type: String,
			default: '../../static/抽奖/wei-zhong-jiang.png',
		},
		giftImgList: {
			type: Array,
			default: () => [],
		},
	});
	// 定义 emits
	const emit = defineEmits(['start', 'canNotStart', 'ok']);
	// 响应式数据
	const start = ref(false);
	const getRes = ref(false);
	const showGiftRes = ref(false);
	const defGiftImgList = ref([
		'../../static/抽奖/li-wu.png',
		'../../static/抽奖/shou-ji.png',
		'../../static/抽奖/shou-biao.png',
		'../../static/抽奖/qiu1.png',
		'../../static/抽奖/qiu2.png',
		'../../static/显示屏/显示屏1.jpg',
		'../../static/抽奖/qiu4.png',
		'../../static/抽奖/qiu5.png',
		'../../static/抽奖/zi-qiu.png',
		'../../static/抽奖/zi-qiu.png',
		'../../static/抽奖/lan-qiu.png',
		'../../static/抽奖/lan-qiu.png',
		'../../static/抽奖/jin-dan.png',
	]);
	// 奖池
	const prizesPool = ref([]);
	// 查询参数
	const queryParams = ref({
		pageNum: 1,
		pageSize: 50,
		blindBoxId: null,
	});
	// 订单参数
	const orderParams = reactive({
		userId: 1,
		totalAmount: 350,
		orderName: null,
		orderImg: null
	})
	const blindBoxId = ref(1)
	const userId = ref();
	// 计算属性，用于获取盲盒名称列表
	const blindBoxNameList = computed(() => {
		return blindBoxList.value.map(item => item.blindBoxName);
	});

	// 初始化奖池列表
	const initPrizeList = () => {
		// console.log('blindstore', blindBoxId.value)
		getBlindProduct(blindBoxId.value).then(res => {
			prizesPool.value = res.data.rows
			console.log('prizesPool.data', prizesPool.value)
		})
	}
	// 初始化盒子列表
	const initBlindBoxList = () => {
		getBlindBoxList(queryParams).then(res => {
			blindBoxList.value = res.data.rows
			// console.log('blindBoxList.data', blindBoxList.value)
		})
	}
	// 初始化奖品列表
	const initGiftList = () => {
		defGiftImgList.value.splice(0, props.giftImgList.length, ...props.giftImgList);
	};
	// 下拉框选择变化事件
	const onBlindBoxChange = (e) => {
		selectedBlindBoxIndex.value = e.detail.value;
		// console.log('blindBoxList[selectedBlindBoxIndex.value]',blindBoxList.value[selectedBlindBoxIndex.value].price)
		// 更改购买盲盒的价格
		orderParams.totalAmount = blindBoxList.value[selectedBlindBoxIndex.value].price
		// 更改奖池
		blindBoxId.value = Number(selectedBlindBoxIndex.value) + 1
		initPrizeList();
	};
	// 支付宝支付 lxudid2423@sandbox.com
	const toPayment = async () => {
		// 判断是否为小程序环境，这里只是示例，实际需要根据项目情况判断
		if (typeof uni !== 'undefined') {
			// 打开一个新页面，在该页面中使用 web-view 加载支付页面
			uni.navigateTo({
				url: `/pages/paymentWebView/paymentWebView?payurl=http://localhost:8080/system/alipay/pay&userId=${orderParams.userId}&totalAmount=${orderParams.totalAmount}&orderName=${orderParams.orderName}&orderImg=${orderParams.orderImg}`
			}).then(res => {
				// handleStart()
			})
		}
		// else {
		// 	// 非小程序环境，使用 window.open
		// 	if (typeof window !== 'undefined') {
		// 		window.open("http://localhost:8080/system/alipay/pay?id=101");
		// 	} else {
		// 		console.error('当前环境不支持打开新窗口');
		// 	}
		// }
	};
	// 开始抽奖
	const handleStart = () => {

		emit('start', () => {
			start.value = true;
			setTimeout(() => {
				getRes.value = true;
				start.value = false;
				// 随机选择一个奖品
				const randomIndex = Math.floor(Math.random() * prizesPool.value.length);
				// 这里假设奖品名称和图片路径一致，可根据实际情况修改
				// 修改这里，使用 props.giftRes 来引用传递进来的 giftRes
				props.giftRes.giftName = prizesPool.value[randomIndex].contentName;
				props.giftRes.url = prizesPool.value[randomIndex].contentImagePath;
				orderParams.orderName = props.giftRes.giftName;
				orderParams.orderImg = props.giftRes.url;
				// console.log('props.giftRes.giftName',props.giftRes)
				toPayment();
				setTimeout(() => {
					getRes.value = false;
					showGiftRes.value = true;
				}, 3000);
			}, 2000);
		});
	};
	// 禁用状态点击
	const handleDisabled = () => {
		emit('canNotStart');
	};
	// 确认中奖信息
	const handleOk = () => {
		showGiftRes.value = false;
		emit('ok');
	};
	// 获取storage的userId
	const getUserIdByStorage = () => {
		uni.getStorage({
			key: "userId",
			success(res) {
				orderParams.userId = res.data
				console.log('获取storage的userId：', orderParams.userId)

			}
		})
	}
	// 初始化奖品列表
	onMounted(() => {
		initGiftList();
		// 初始化奖池列表
		initPrizeList();
		// 初始化盒子列表
		initBlindBoxList();
		//获取storage的userId
		getUserIdByStorage();
	});
</script>

<style lang="scss" scoped>
	.blind-box-selector {
		padding: 10px;
	}

	.picker {
		.picker-title {
			border: 1px solid #ccc;
			padding: 5px 10px;
			border-radius: 20rpx;
			font-size: 48rpx;
			width: auto;
			// min-width: 350rpx;
			text-align: center;
		}
	}

	.egg-twist {
		.gift-res {
			position: fixed;
			width: 100vw;
			height: 100vh;
			top: 0;
			left: 0;
			z-index: 100;
			background: rgba(0, 0, 0, 0.6);

			.res-container {
				position: fixed;
				z-index: 20;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -60%);
			}

			.not-win-img {
				width: 100%;
				height: 600rpx;
			}

			.res-img-box {
				text-align: center;
				color: #fff;
				z-index: 30;
				height: 600rpx;
				width: 100vw;

				.res-guang,
				.res-img,
				.res-text {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				.res-img {
					width: 300rpx;
					z-index: 50;
				}

				.res-text {
					width: 100%;
					font-size: 42rpx;
					top: 80%;
				}
			}

			.res-submit {
				width: 300rpx;
				height: 100rpx;
				display: block;
				margin: 150rpx auto 0;
			}
		}
	}

	.egg-twist-container {
		width: 100vw;
		position: relative;
		height: 800rpx;
		font-size: 16px;

		.egg-twist-main-img {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 5;
		}

		.egg-twist-btn {
			position: absolute;
			bottom: -4%;
			width: 285rpx;
			height: 23%;
			z-index: 10;
			right: 3.5em;
		}

		.egg-twist-chu-kou {
			position: absolute;
			width: 130rpx;
			height: 18%;
			z-index: 4;
			bottom: 2px;
			left: 24%;
		}

		.egg-twist-shou {
			position: absolute;
			z-index: 10;
			height: 15%;
			bottom: 0;
			right: 3em;
			width: 150rpx;
			transform-origin: right bottom;
			animation: shouAnima .8s linear 0s infinite alternate;
		}

		.egg-twist-1,
		.egg-twist-2,
		.egg-twist-3 {
			position: absolute;
			z-index: 2;
			width: 200rpx;
			height: 22%;

			&.gift {
				animation-duration: 0.5s !important;
			}
		}

		.egg-twist-1 {
			left: 10em;
			top: 15%;
			animation: 2s linear 0s infinite normal none running liwuAni;
		}

		.egg-twist-2 {
			left: 10em;
			top: 45%;
			animation: 2s linear 0.4s infinite normal none running shouji;
		}

		.egg-twist-3 {
			left: 5em;
			top: 33%;
			animation: 2s linear 0.4s infinite normal none running shouji;
		}

		.egg-twist-4,
		.egg-twist-5,
		.egg-twist-6,
		.egg-twist-7,
		.egg-twist-8,
		.egg-twist-9,
		.egg-twist-10,
		.egg-twist-11,
		.egg-twist-12,
		.egg-twist-13,
		.res-egg {
			position: absolute;
			z-index: 1;
			width: 100rpx;
			height: 10%;

			&.gift {
				animation-duration: 0.5s !important;
			}
		}

		.egg-twist-4 {
			left: 8em;
			top: 24%;
			animation: 2s linear 0.4s infinite normal none running qiu1;
		}

		.egg-twist-5 {
			right: 6em;
			top: 47%;
			animation: 2s linear 0.4s infinite normal none running qiu2;
		}

		.egg-twist-6 {
			top: 37%;
			left: 13em;
			animation: 2s linear 0.4s infinite normal none running qiu3;
		}

		.egg-twist-7 {
			left: 9em;
			top: 51%;
			animation: 2s linear 0.4s infinite normal none running qiu2;
		}

		.egg-twist-8 {
			right: 6em;
			top: 30%;
			animation: 2s linear 0.4s infinite normal none running qiu5;
		}

		.egg-twist-9 {
			left: 6em;
			top: 50%;
			z-index: 1;
			animation: 2s linear 0.4s infinite normal none running qiu3;
		}

		.egg-twist-10 {
			left: 9em;
			top: 45%;
			z-index: 1;
			animation: 2s linear 0.4s infinite normal none running qiu3;
		}

		.egg-twist-11 {
			right: 7em;
			top: 55%;
			z-index: 1;
			animation: 2s linear 0.4s infinite normal none running qiu2;
		}

		.egg-twist-12 {
			right: 6em;
			top: 40%;
			z-index: 1;
			animation: 2s linear 0.4s infinite normal none running qiu2;
		}

		.egg-twist-13 {
			left: 9em;
			top: 35%;
			z-index: 1;
			animation: 2s linear 0.4s infinite normal none running qiu1;
		}

		.res-egg {
			width: 70rpx;
			height: 7%;
			left: 10%;
			top: 35%;
			animation: 2s linear 1 normal forwards running resEgg;
		}
	}

	@keyframes shouAnima {

		0%,
		80%,
		100% {
			transform: rotate(0);
		}

		40% {
			transform: rotate(30deg);
		}
	}

	@keyframes liwuAni {

		0%,
		100% {
			transform: rotate(60deg) translateZ(0);
		}

		50% {
			transform: rotate(60deg) translate3d(10%, 0, 0);
		}
	}

	@keyframes shouji {

		0%,
		100% {
			transform: rotate(-30deg) translateZ(0);
		}

		50% {
			transform: rotate(-30deg) translate3d(10%, 0, 0);
		}
	}

	@keyframes qiu1 {

		0%,
		100% {
			transform: rotate(45deg) translateZ(0);
		}

		50% {
			transform: rotate(45deg) translate3d(40%, 0, 0);
		}
	}

	@keyframes qiu2 {

		0%,
		100% {
			transform: rotate(-120deg) translateZ(0);
		}

		50% {
			transform: rotate(-120deg) translate3d(40%, 0, 0);
		}
	}

	@keyframes qiu3 {

		0%,
		100% {
			transform: rotate(-40deg) translateZ(0);
		}

		50% {
			transform: rotate(-40deg) translate3d(30%, 0, 0);
		}
	}

	@keyframes qiu5 {

		0%,
		100% {
			transform: rotate(110deg) translateZ(0);
		}

		50% {
			transform: rotate(110deg) translate3d(30%, 0, 0);
		}
	}

	@keyframes resEgg {
		0% {
			transform: rotateZ(-180deg);
		}

		10% {
			left: 6.8%;
			transform: rotateZ(-90deg);
		}

		50% {
			left: 6.8%;
			top: 75%;
			transform: rotateZ(-90deg);
		}

		100% {
			width: 100rpx;
			height: 10%;
			z-index: 5;
			top: 87%;
			left: 30%;
			transform: rotateZ(40deg);
		}
	}
</style>